<template>
  <div class="learning-settings-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Setting /></el-icon>
          <div class="header-text">
            <h2>学习设置</h2>
            <p>学习平台参数配置</p>
          </div>
        </div>
      </div>
    </el-card>

    <el-card shadow="never">
      <el-tabs v-model="activeTab">
        <!-- 基础设置 -->
        <el-tab-pane label="基础设置" name="basic">
          <el-form :model="basicSettings" label-width="150px">
            <el-divider content-position="left">平台信息</el-divider>
            
            <el-form-item label="平台名称">
              <el-input v-model="basicSettings.platformName" placeholder="请输入平台名称" style="width: 400px" />
            </el-form-item>
            
            <el-form-item label="平台LOGO">
              <el-upload
                class="logo-uploader"
                :auto-upload="false"
                :show-file-list="false"
                accept="image/*"
              >
                <img v-if="basicSettings.logo" :src="basicSettings.logo" class="logo-image" />
                <div v-else class="logo-placeholder">
                  <el-icon><Plus /></el-icon>
                  <span>上传LOGO</span>
                </div>
              </el-upload>
            </el-form-item>
            
            <el-form-item label="平台介绍">
              <el-input
                v-model="basicSettings.description"
                type="textarea"
                :rows="4"
                placeholder="请输入平台介绍"
                style="width: 600px"
              />
            </el-form-item>

            <el-divider content-position="left">学习设置</el-divider>
            
            <el-form-item label="每日学习目标">
              <el-input-number v-model="basicSettings.dailyGoal" :min="10" :max="480" />
              <span style="margin-left: 10px;">分钟</span>
            </el-form-item>
            
            <el-form-item label="自动播放下一课时">
              <el-switch v-model="basicSettings.autoPlayNext" />
            </el-form-item>
            
            <el-form-item label="学习进度自动保存">
              <el-switch v-model="basicSettings.autoSaveProgress" />
            </el-form-item>
            
            <el-form-item label="学习提醒">
              <el-switch v-model="basicSettings.studyReminder" />
              <span class="form-tip">每天定时提醒学习</span>
            </el-form-item>
            
            <el-form-item label="提醒时间" v-if="basicSettings.studyReminder">
              <el-time-picker
                v-model="basicSettings.reminderTime"
                format="HH:mm"
                placeholder="选择时间"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings" :loading="saveLoading">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 考试设置 -->
        <el-tab-pane label="考试设置" name="exam">
          <el-form :model="examSettings" label-width="180px">
            <el-divider content-position="left">考试规则</el-divider>
            
            <el-form-item label="允许重考">
              <el-switch v-model="examSettings.allowRetake" />
            </el-form-item>
            
            <el-form-item label="最多重考次数" v-if="examSettings.allowRetake">
              <el-input-number v-model="examSettings.maxRetakes" :min="1" :max="10" />
              <span style="margin-left: 10px;">次</span>
            </el-form-item>
            
            <el-form-item label="重考间隔时间" v-if="examSettings.allowRetake">
              <el-input-number v-model="examSettings.retakeInterval" :min="1" :max="168" />
              <span style="margin-left: 10px;">小时</span>
            </el-form-item>
            
            <el-form-item label="显示正确答案">
              <el-switch v-model="examSettings.showAnswers" />
              <span class="form-tip">考试结束后显示</span>
            </el-form-item>
            
            <el-form-item label="随机抽题">
              <el-switch v-model="examSettings.randomQuestions" />
            </el-form-item>
            
            <el-form-item label="随机选项顺序">
              <el-switch v-model="examSettings.shuffleOptions" />
            </el-form-item>

            <el-divider content-position="left">及格设置</el-divider>
            
            <el-form-item label="默认及格分">
              <el-input-number v-model="examSettings.defaultPassScore" :min="0" :max="100" />
              <span style="margin-left: 10px;">分</span>
            </el-form-item>
            
            <el-form-item label="默认考试时长">
              <el-input-number v-model="examSettings.defaultDuration" :min="10" :max="300" />
              <span style="margin-left: 10px;">分钟</span>
            </el-form-item>

            <el-divider content-position="left">防作弊设置</el-divider>
            
            <el-form-item label="禁止切换窗口">
              <el-switch v-model="examSettings.preventSwitch" />
              <span class="form-tip">切换窗口时记录并扣分</span>
            </el-form-item>
            
            <el-form-item label="人脸识别验证">
              <el-switch v-model="examSettings.faceRecognition" />
              <span class="form-tip">考试中随机抓拍</span>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="saveExamSettings" :loading="saveLoading">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 证书设置 -->
        <el-tab-pane label="证书设置" name="certificate">
          <el-form :model="certificateSettings" label-width="150px">
            <el-divider content-position="left">证书等级</el-divider>
            
            <el-form-item label="启用证书等级">
              <el-switch v-model="certificateSettings.enableLevels" />
            </el-form-item>
            
            <template v-if="certificateSettings.enableLevels">
              <el-form-item label="金牌证书分数线">
                <el-input-number v-model="certificateSettings.goldThreshold" :min="0" :max="100" />
                <span style="margin-left: 10px;">分及以上</span>
              </el-form-item>
              
              <el-form-item label="银牌证书分数线">
                <el-input-number v-model="certificateSettings.silverThreshold" :min="0" :max="100" />
                <span style="margin-left: 10px;">分及以上</span>
              </el-form-item>
              
              <el-form-item label="铜牌证书分数线">
                <el-input-number v-model="certificateSettings.bronzeThreshold" :min="0" :max="100" />
                <span style="margin-left: 10px;">分及以上</span>
              </el-form-item>
            </template>

            <el-divider content-position="left">证书内容</el-divider>
            
            <el-form-item label="证书抬头">
              <el-input v-model="certificateSettings.header" placeholder="如：结业证书" style="width: 400px" />
            </el-form-item>
            
            <el-form-item label="颁发机构">
              <el-input v-model="certificateSettings.issuer" placeholder="如：企业培训中心" style="width: 400px" />
            </el-form-item>
            
            <el-form-item label="证书有效期">
              <el-radio-group v-model="certificateSettings.validity">
                <el-radio label="permanent">永久有效</el-radio>
                <el-radio label="limited">限期有效</el-radio>
              </el-radio-group>
            </el-form-item>
            
            <el-form-item label="有效期时长" v-if="certificateSettings.validity === 'limited'">
              <el-input-number v-model="certificateSettings.validityYears" :min="1" :max="10" />
              <span style="margin-left: 10px;">年</span>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="saveCertificateSettings" :loading="saveLoading">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 积分设置 -->
        <el-tab-pane label="积分设置" name="points">
          <el-form :model="pointsSettings" label-width="180px">
            <el-divider content-position="left">积分规则</el-divider>
            
            <el-form-item label="完成课时奖励">
              <el-input-number v-model="pointsSettings.completeLessonPoints" :min="1" :max="100" />
              <span style="margin-left: 10px;">积分</span>
            </el-form-item>
            
            <el-form-item label="完成课程奖励">
              <el-input-number v-model="pointsSettings.completeCoursePoints" :min="10" :max="1000" />
              <span style="margin-left: 10px;">积分</span>
            </el-form-item>
            
            <el-form-item label="通过考试奖励">
              <el-input-number v-model="pointsSettings.passExamPoints" :min="10" :max="1000" />
              <span style="margin-left: 10px;">积分</span>
            </el-form-item>
            
            <el-form-item label="获得金牌证书奖励">
              <el-input-number v-model="pointsSettings.goldCertPoints" :min="50" :max="5000" />
              <span style="margin-left: 10px;">积分</span>
            </el-form-item>
            
            <el-form-item label="发布知识文章奖励">
              <el-input-number v-model="pointsSettings.publishArticlePoints" :min="5" :max="500" />
              <span style="margin-left: 10px;">积分</span>
            </el-form-item>
            
            <el-form-item label="每日签到奖励">
              <el-input-number v-model="pointsSettings.dailyCheckInPoints" :min="1" :max="50" />
              <span style="margin-left: 10px;">积分</span>
            </el-form-item>

            <el-divider content-position="left">积分用途</el-divider>
            
            <el-form-item label="积分兑换课程">
              <el-switch v-model="pointsSettings.enableExchange" />
            </el-form-item>
            
            <el-form-item label="兑换比例" v-if="pointsSettings.enableExchange">
              <el-input-number v-model="pointsSettings.exchangeRate" :min="1" :max="1000" />
              <span style="margin-left: 10px;">积分 = 1元课程</span>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="savePointsSettings" :loading="saveLoading">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting, Plus } from '@element-plus/icons-vue'

// 状态
const activeTab = ref('basic')
const saveLoading = ref(false)

// 基础设置
const basicSettings = reactive({
  platformName: '企业学习中心',
  logo: '',
  description: '为员工提供优质的在线学习资源',
  dailyGoal: 30,
  autoPlayNext: true,
  autoSaveProgress: true,
  studyReminder: true,
  reminderTime: '20:00'
})

// 考试设置
const examSettings = reactive({
  allowRetake: true,
  maxRetakes: 3,
  retakeInterval: 24,
  showAnswers: true,
  randomQuestions: false,
  shuffleOptions: false,
  defaultPassScore: 60,
  defaultDuration: 60,
  preventSwitch: true,
  faceRecognition: false
})

// 证书设置
const certificateSettings = reactive({
  enableLevels: true,
  goldThreshold: 90,
  silverThreshold: 80,
  bronzeThreshold: 70,
  header: '结业证书',
  issuer: '企业培训中心',
  validity: 'permanent',
  validityYears: 3
})

// 积分设置
const pointsSettings = reactive({
  completeLessonPoints: 10,
  completeCoursePoints: 100,
  passExamPoints: 50,
  goldCertPoints: 500,
  publishArticlePoints: 20,
  dailyCheckInPoints: 5,
  enableExchange: true,
  exchangeRate: 100
})

// 方法
const saveBasicSettings = async () => {
  try {
    saveLoading.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    localStorage.setItem('learningBasicSettings', JSON.stringify(basicSettings))
    ElMessage.success('基础设置保存成功')
  } finally {
    saveLoading.value = false
  }
}

const saveExamSettings = async () => {
  try {
    saveLoading.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    localStorage.setItem('learningExamSettings', JSON.stringify(examSettings))
    ElMessage.success('考试设置保存成功')
  } finally {
    saveLoading.value = false
  }
}

const saveCertificateSettings = async () => {
  try {
    saveLoading.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    localStorage.setItem('learningCertificateSettings', JSON.stringify(certificateSettings))
    ElMessage.success('证书设置保存成功')
  } finally {
    saveLoading.value = false
  }
}

const savePointsSettings = async () => {
  try {
    saveLoading.value = true
    await new Promise(resolve => setTimeout(resolve, 1000))
    localStorage.setItem('learningPointsSettings', JSON.stringify(pointsSettings))
    ElMessage.success('积分设置保存成功')
  } finally {
    saveLoading.value = false
  }
}
</script>

<style scoped>
.learning-settings-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.3s;
}

.logo-uploader:hover {
  border-color: #409EFF;
}

.logo-image {
  width: 200px;
  height: 80px;
  display: block;
  object-fit: contain;
}

.logo-placeholder {
  width: 200px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fafafa;
  color: #8c939d;
  gap: 8px;
}
</style>

